<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <div class="relative" ref="documentContainer">
        <div
          class="mx-auto my-4 max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex flex-col">
          <div class="flex-grow">
            <div id="section-title">
              <h3 class="text-center text-2xl font-bold mb-8">入党申请书</h3>
            </div>

            <div id="section-body">
              <p class="mb-4">敬爱的党组织：</p>
              <p class="indent-8 mb-4 text-justify">
                我志愿加入中国共产党，拥护党的纲领，遵守党的章程，履行党员义务，执行党的决定，严守党的纪律，保守党的秘密，对党忠诚，积极工作，为共产主义奋斗终身，随时准备为党和人民牺牲一切，永不叛党。
              </p>
              <p class="indent-8 mb-4 text-justify">
                中国共产党是中国工人阶级的先锋队，同时是中国人民和中华民族的先锋队，是中国特色社会主义事业的领导核心。我深刻认识到党的伟大，并决心为之奋斗终身。
              </p>



              <p class="text-center text-gray-400 my-8 py-4 border-y border-gray-200">
                [ 此处省略正文约800字 ]
              </p>


              <p class="indent-8 mb-4 text-justify">
                因此，我郑重地向党组织提出申请，请党组织在实践中考验我！
              </p>
              <div class="mt-12 text-right font-songti">
                <p>此致</p>
                <p>敬礼！</p>
              </div>
            </div>
          </div>

          <div id="section-signature" class="mt-8 text-right self-end font-songti">
            <p class="text-gray-800 text-lg font-kaiti">申请人：{{ signerName }}</p>
            <p class="text-gray-600 mt-2 flex items-center justify-end">
              <n-tooltip v-if="getValidationInfo('signatureDate')" trigger="hover">
                <template #trigger>
                  <n-icon :size="16" :color="getLevelColor(getValidationInfo('signatureDate').level)" class="mr-1.5">
                    <component :is="getIconComponent(getValidationInfo('signatureDate').level)" />
                  </n-icon>
                </template>
                <span>{{ getValidationInfo('signatureDate').message }}</span>
              </n-tooltip>
              <span>{{ signingDate }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="100" :listen-to="scrollContainer" :offset-target="scrollContainer">
          <n-anchor-link title="落款" href="#section-signature" />
        </n-anchor>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { NTooltip, NIcon, NAnchor, NAnchorLink } from 'naive-ui'
import { getLevelColor, getIconComponent } from '@/utils/levelUtils'

// 滚动容器引用
const scrollContainer = ref(null)
const documentContainer = ref(null)

const props = defineProps({
  member: {
    type: Object,
    default: () => ({})
  },
  validation: {
    type: Array,
    default: () => []
  }
})

function getValidationInfo(key) {
  if (!props.validation || !Array.isArray(props.validation)) {
    return null
  }
  return props.validation.find(item => item.key === key)
}

const signerName = computed(() => props.member?.memberName || '（姓名未填写）')

const signingDate = computed(() => {
  const date = props.member?.applicationForm?.signatureDate
  if (!date) return '（日期未填写）'
  if (date.includes('年')) return date
  const [year, month, day] = date.split('-')
  return `${year}年${month}月${day}日`
})

// 调试：检查容器是否正确绑定
onMounted(() => {
  console.log('scrollContainer:', scrollContainer.value)
  console.log('documentContainer:', documentContainer.value)

  if (scrollContainer.value) {
    scrollContainer.value.addEventListener('scroll', () => {
      console.log('滚动事件触发')
    })
  }
})
</script>

<style scoped>
.font-songti {
  font-family: "SimSun", "STSong", serif;
}

.font-kaiti {
  font-family: "KaiTi", "STKaiti", serif;
}

/* 自定义滚动条样式 */
.flex-1::-webkit-scrollbar {
  width: 8px;
}

.flex-1::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.flex-1::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.flex-1::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>